<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-row :gutter="50" justify="space-between">
      <a-col :span="12">
        <a-form-item :wrapper-col="{ span:24 }">
          <a-input
            allowClear
            v-decorator="[
          'wwName',
          { rules: [{ required: true, message: '请输入姓名' },{max:30, message: '请输入正确的姓名'}] },
        ]"
            placeholder="姓名"
          >
            <span slot="suffix" style="color:#0093FF;font-size:16px;">*</span>
          </a-input>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item :wrapper-col="{ span:24 }">
          <a-input
            v-decorator="[
          'wwPhone',
          { rules: [{ required: true, message: '请输入手机号' },{pattern:/^1\d{10}$/,message:'请输入正确的手机号码'}] },
        ]"
            placeholder="手机号"
            @blur="onChange"
          >
            <span slot="suffix" style="color:#0093FF;font-size:20px;">*</span>
          </a-input>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="50" justify="space-between" v-if="showCode">
      <a-col :span="12">
        <a-form-item :wrapper-col="{ span:24 }">
          <a-input
            allowClear
            v-decorator="[
          'wwAuthCode',
          { rules: [{ required: true, message: '请输入验证码',time:1000 },{max:30, message: '请输入正确的姓名'}] },
        ]"
            placeholder="验证码"
          >
            <span slot="suffix" style="color:#0093FF;font-size:16px;">*</span>
          </a-input>
        </a-form-item>
      </a-col>
      <a-col :span="12" class="text-left">
        <img :src="imgCode" alt @click="onChange" />
      </a-col>
    </a-row>
    <a-row :gutter="50" justify="space-between">
      <a-col :span="12">
        <a-form-item :wrapper-col="{ span:24 }">
          <a-input v-decorator="['wwCompanyName']" placeholder="单位名称" allowClear></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item :wrapper-col="{ span:24 }">
          <a-input v-decorator="['wwPosition']" placeholder="职务"></a-input>
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item :wrapper-col="{ span:24 }">
      <a-textarea placeholder="留言（您的需求）" :rows="4" v-decorator="[
          'wwContent']" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span:12 }">
      <a-button type="primary" html-type="submit" class="formSub">提交</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
export default {
  name: "cooperationForm",
  data() {
    return {
      showCode: false,
      formLayout: "horizontal",
      imgCode: "",
      form: this.$form.createForm(this, { name: "cooperationForm" })
    };
  },
  methods: {
    onChange() {
      this.form.validateFields((err, values) => {
        if (err && err.wwPhone) {
          this.showCode = false;
          this.form.resetFields(["code"]);
          return;
        }
        if (values.wwPhone) {
          this.showCode = true;
          this.form.resetFields(["code"]);
          this.imgCode =
            `${this.$global.IMG_CODE_URL}${values.wwPhone}?` +
            new Date().getTime();
        }
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$axios
            .request({
              url: "/cooperation/sendmail",
              method: "post",
              data: values
            })
            .then(res => {
              if (!res.success) {
                this.$message.error(res.error);
                this.onChange();
              } else {
                this.showCode = false;
                this.form.resetFields();
                this.$message.success(
                  "感谢您的信任，我们会尽快安排工作人员与您联系，谢谢！"
                );
              }
            });
        }
      });
    }
  }
};
</script>